import React, { useState } from "react";
import axios from 'axios'
import pubsub from 'pubsub-js'
export default function Header() {
    const [gainValue ,  setGainValue] = useState('');
    const getDatum = async() => {
        pubsub.publish("github",{
            isShow : false,
            underway:true,
            data : []
          })
        const re = await axios.get("https://api.github.com/search/users?q=" + gainValue);
        pubsub.publish('github' ,{
            isShow : false,
            underway: false,
            data : re.data.items
          })
    }
  return (
    <div>
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input
            value={gainValue}
            onChange = {(e)=>{setGainValue(e.target.value)}}
            type="text"
            placeholder="enter the name you search"
          />
          &nbsp;<button onClick = {getDatum}>Search</button>
        </div>
      </section>
    </div>
  );
}
